import React from 'react';
import style from './train.module.css'
interface Campaign {
  date: string;
  title: string;
  day: Array<string>;
}

const MarketingCampaigns: React.FC = () => {
  const campaigns: Campaign[] = [
    { date: '9月27日', title: '剩3天', day: ['世界避孕日'] },
    { date: '9月28日', title: '剩4天', day: ['世界旅游日'] },
    { date: '9月29日', title: '剩5天', day: ['孔子文化节', '世界狂犬病日'] },
    { date: '9月30日', title: '剩6天', day: ['世界心脏日'] },
    { date: '10月01日', title: '剩7天', day:['国庆节', '十月你好'] },
    { date: '10月02日', title: '剩8天', day:  ['世界烈士纪念日'] },
    { date: '10月04日', title: '剩11天', day: ['世界动物日'] },
    { date: '10月05日', title: '剩12天', day: ['世界教师日'] },
  ];

  return (
    <div>
      <h2 style={{marginLeft:'30px'}}>营销模版直通车</h2>
      <div className={style.ben}>
        {
          campaigns.map(campaign => (
            <div className={style.ben} key={campaign.date}>
              <p>
                <span>{campaign.date}</span>
                <span>{campaign.title}</span>
              </p>
              <h3><span style={{ color: 'orange' }}>|</span> {campaign.day.join(' ')}</h3>
            </div>
          ))
        }
      </div>
      {/*       
      <div className={style.ben}>
        <p>
          <span>9月26日</span>
          <span>剩3天</span>
        </p>
        <h3><span style={{color:'orange'}}>|</span>世界避孕日</h3>
      </div> */}

      {/*       
      <ul>
        {campaigns.map(campaign => (
          <li key={campaign.date}>
            {campaign.date}: {campaign.title}
          </li>
        ))}
      </ul> */}
    </div>
  );
};

export default MarketingCampaigns;